<template>
  <div class="tabs">
    <!--命名路由-->
    <ul>
      <router-link to="/" tag="li" exact>
        <div>
          <i class="el-icon-bell"></i>
        </div>
        <div>外卖</div>
      </router-link>
      <router-link to="/supermarket" tag="li">
        <div>
          <i class="el-icon-service"></i>
        </div>
        <div>会员</div>
      </router-link>
      <router-link to="/order" tag="li">
        <div>
          <i class="el-icon-phone-outline"></i>
        </div>
        <div>订单</div>
      </router-link>
      <router-link to="/login" tag="li">
        <div>
          <i class="el-icon-news"></i>
        </div>
        <div>我的</div>
      </router-link>
    </ul>
  </div>
</template>
<script>
  export default {}
</script>
<style lang="stylus" type="text/stylus">
  .tabs
    position: fixed
    bottom: 0
    left: 0
    background-color: #fff
    box-shadow: 0 2px 4px #000
    width: 100%
    & > ul, & > ul > li
      margin: 0;
      padding: 0;
    ul
      display: table
      width: 100%
      & > li
        text-align: center
        font-size: 14px
        display: table-cell
        padding: 8px 12px
        cursor: pointer
        &.active
          color: blue
        & > div
          font-size: 12px
          & > i
            font-size: 20px
            margin-bottom :4px
</style>
